<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">

		<button-search class="pt-3" placeholder="手机号/邮箱/会员名称"
		@search="searchEvent">
			<template #left>
				<el-button size="mini" type="success"
				@click="openCreateModel(false)">添加会员</el-button>
			</template>
			<template #form>
				<el-form inline :model="search" ref="search" label-width="80px">
					<el-form-item label="搜索内容" class="mb-0">
						<el-input v-model="search.keyword"
						placeholder="手机号/邮箱/会员名称"
						size="mini"></el-input>
					</el-form-item>
					<el-form-item label="会员等级" class="mb-0">
						<el-select v-model="search.user_level_id" placeholder="会员等级" size="mini">
							<el-option label="== 请选择 ==" value=""></el-option>
							<el-option key="1" :label="item.name" :value="item.id"
							v-for="(item, index) in user_level" :key="index">
								
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="mb-0 ml-auto">
						<el-button class="ml-2" type="info" size="mini" @click="searchEvent">搜索</el-button>
						<el-button type="info" size="mini" @click="clearSearch">清空筛选条件</el-button>
					</el-form-item>
				</el-form>
			</template>
		</button-search>
		
		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%">
			<el-table-column label="会员" width="250" >
				<template slot-scope="scope">
					<div class="media">
						<img class="mr-2" :src="scope.row.avatar" 
						mode="center"
						style="width: 50px;height: 50px;border-radius: 100%;"/>
						<div class="media-body">
							<h6 class="mt-0 d-flex algin-items-center">
								{{scope.row.username}}
								<el-button class="ml-auto"  type="text" size="mini">详情</el-button>
							</h6>
							用户ID：{{scope.row.id}}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="会员等级" align="center" width="150">
				<template slot-scope="scope">
					{{scope.row.user_level.name}}
				</template>
			</el-table-column>
			<el-table-column prop="order" label="注册/登录" align="center" width="250">
				<template slot-scope="scope">
					<div>注册时间：{{scope.row.create_time}}</div>
					<div>最后登录：{{scope.row.last_login_time}}</div>
				</template>
			</el-table-column>
		
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini" plain
					@click="changeStatus(scope.row)">
						{{scope.row.status ? '启用' : '禁用'}}
					</el-button>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="text" size="mini"
					@click="openCreateModel(scope)">修改</el-button>
					<el-button type="text" size="mini" 
					@click="deleteItem(scope)">
						重置密码
					</el-button>
					<el-button type="text" size="mini"
					@click="deleteItem(scope.row)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>

		<!-- 添加类型 model -->
		<el-dialog :title="editIndex === -1 ? '新增会员' : '修改会员'" :visible.sync="showCreateModel" top="5vh" width="80%">
			<el-form ref="form" :model="form" label-width="80px">
				
				<el-form-item label="用户名" prop="username">
					<el-col :span="6">
						<el-input v-model="form.username" 
						placeholder="用户名" size="mini"
						:disabled="editIndex !== -1"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="密码" prop="password"
				v-if="editIndex === -1">
					<el-col :span="6">
						<el-input v-model="form.password" 
						placeholder="密码" size="mini"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="昵称">
					<el-col :span="6">
						<el-input v-model="form.nickname" 
						placeholder="昵称" size="mini"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="头像" >
					<div>
						<span v-if="!form.avatar" class="btn btn-light border mr-2"
						@click="chooseImage">
							<i class="el-icon-plus"></i>
						</span>
						<img v-else class=" rounded" :src="form.avatar" 
						style="width: 80px;cursor: pointer;" 
						@click="chooseImage"/>
					</div>
				</el-form-item>
				<el-form-item label="会员等级" >
					<el-col :span="6">
						<el-select v-model="form.user_level_id" placeholder="会员等级" size="mini">
							<el-option label="== 请选择 ==" value=""></el-option>
							<el-option key="1" :label="item.name" :value="item.id"
							v-for="(item, index) in user_level" :key="index">
								
							</el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="手机" >
					<el-col :span="6">
						<el-input v-model="form.phone" 
						placeholder="手机号" size="mini"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="邮箱" >
					<el-col :span="6">
						<el-input v-model="form.email" 
						placeholder="邮箱" size="mini"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="状态" >
					<el-switch v-model="form.status"
					:active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showCreateModel = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"
	import common from "@/common/mixins/common.js";

	export default {
		
		mixins:[common],
		
		inject: ['app', 'layout'],
		
		components: {
			buttonSearch,
		},

		data() {
			return {
				preUrl: 'user',
				
				//搜索条件
				search: {
					keyword: '',
					user_level_id: '',
				},
				
				form: {
					username: '',
					password: '',
					nickname: '',
					avatar: '',
					user_level_id: 1,
					phone: '',
					email: '',
					status: 1,
					
				},
				
				//当前编辑的索引
				editIndex: -1,
	
				tableData: [],

				//是否显示添加规格model
				showCreateModel: false,
				
				user_level: []
			}
		},
		

		methods: {
			
			//getListResult
			getListResult(e) {
				this.tableData = e.list
				this.user_level = e.user_level
			},
			
			//选择图片
			chooseImage() {
				this.app.showImageModel((res) => {
					this.form.avatar = res[0].url
				}, 1)
			},
			
			//清空搜索条件
			clearSearch() {
				this.search = {
					keyword: '',
					user_level_id: '',
				}
			},
			//搜索事件
			searchEvent(e = false) {
				if (typeof e === 'string') {
					let params = {
						keyword: e
					}
					this.getListPlus(params)
					return
				} 
				//高级搜索
				let params = {
					keyword : this.search.keyword,
					user_level_id: this.search.user_level_id,
				}
				this.getListPlus(params)
			},
		
			//打开新增规格model
			openCreateModel(e = false) {
				if (!e) { //增加
					this.form = {
						username: '',
						password: '',
						nickname: '',
						avatar: '',
						user_level_id: "",
						phone: '',
						email: '',
						status: 1,
					}
					this.editIndex = -1
				} else {
					this.form = {...e.row}
					this.editIndex = e.$index
				}
				
				this.showCreateModel = true
			},
			
			//submit 添加类型
			submit() {
				this.$refs['form'].validate(res => {
					if (res) {
						let id = 0
						if (this.editIndex !== -1) {
							id = this.tableData[this.editIndex].id
						}
						this.addOrEditPromise(this.form, id)
							.then(res => {
								this.showCreateModel = false
							})
							.catch(err => {
								console.log(err)
							})
					}
				})
				
			},
			
		}
	}
</script>

<style>
.sku-list-item>i{
	display: none;
}
.sku-list-item:hover{
	background-color: #f4f4f4;
	cursor: pointer;
}	
.sku-list-item:hover>i{
	display: inline-block;
}
.sku-list-item:hover>font{
	display: none;
}
</style>
